<template>
  <el-card :header="title">
    <el-form label-width="120px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="填报时间">
            {{
              moment(fillData.BeginDate).format("YYYY-MM-DD") +
                " 至 " +
                moment(fillData.EndDate).format("YYYY-MM-DD")
            }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布人">
            {{ fillData.CreateEmp }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布时间">
            <span v-if="fillData.PublicTime">{{
              moment(fillData.PublicTime).format("YYYY-MM-DD HH:mm")
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="填报说明">
            {{ fillData.Show }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider>填报内容</el-divider>
    <userForm
      :form-id="fillData.TableId"
      link-type="fillForm"
      :link-pk="id"
      :readonly="isReadonly"
      :is-load="isLoad"
    />
  </el-card>
</template>

<script>
import moment from 'moment'
import * as fillApi from '@/OA/api/userFill'
import userForm from '@/customForm/components/userForm/userForm'
import { DictItemDic } from '@/OA/config/oaConfig'
export default {
  components: {
    userForm
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      fillData: {},
      title: null,
      isLoad: false,
      isReadonly: false
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    moment,
    async reset() {
      const res = await fillApi.Get(this.id)
      this.title = res.Title
      this.fillData = res
      this.isReadonly = (res.Status !== 1 && res.FillStatus === 1 && moment(res.EndDate) > moment()) === false
      console.log(this.isReadonly)
      this.isLoad = true
    }
  }
}
</script>
